<template>
	<view class="anmed">
		<view class="my-top">
			<image class="header" src="https://xcx.xiaombt.com/img/img/header.png" mode="" :style="{ height: navbarHeight + 'px' }">
			</image>
			<view class="nav">
				<u-navbar title="咨询详情" :autoBack='true' bgColor="transparent" leftIconColor='#6C5D47'
					titleStyle='color:#6C5D47' placeholder>
				</u-navbar>
			</view>
		</view>
		<view class="main" :style="{ marginTop: viewHeight + 'px' }">
			<view class="title">
				{{data.title}}
			</view>
			<view class="one">
				<view class="left">
					来源：长春市小马奔腾教育有限公司
				</view>
				<view class="right">
					{{time(data.inputtime)}}
				</view>
			</view>
			<view class="con" v-html="data.content">
			

			</view>
			<view class="bottom">
				<view class="left">
					阅读 2.7万
				</view>
				<view class="right">
					<view class="img">
						<image src="https://xcx.xiaombt.com/img/img/xihuan (1).png" mode=""></image>
						<image v-show="false" src="https://xcx.xiaombt.com/img/img/xihuan (2).png" mode=""></image>
					</view>
					赞 99
				</view>
			</view>
			<view class="pinglun">
				<view class="center">
					<view class="pinglun-title">
						<view class="left">
							留言
						</view>
						<view class="right">
							<image src="https://xcx.xiaombt.com/img/img/edit.png" mode=""></image>
							<view>写留言</view>

						</view>
					</view>
					<view class="pinglun-list">
						<view class="pinglun-item">
							<image class="a" src="https://xcx.xiaombt.com/img/img/底图-2.png" mode=""></image>
							<view class="b">
								<view class="name">
									张天爱
								</view>
								<view class="pinglun-con">
									动物解刨学主要学什么？
								</view>
							</view>
							<view class="c">
								<view class="img">
									<image src="https://xcx.xiaombt.com/img/img/xihuan (1).png" mode=""></image>
									<image v-show="false" src="https://xcx.xiaombt.com/img/img/xihuan (2).png" mode=""></image>
								</view>
								<view class="">
									99
								</view>

							</view>
						</view>
						<view class="pinglun-item">
							<image class="a" src="https://xcx.xiaombt.com/img/img/底图-2.png" mode=""></image>
							<view class="b">
								<view class="name">
									张天爱
								</view>
								<view class="pinglun-con">
									动物解刨学主要学什么？
								</view>
							</view>
							<view class="c">
								<view class="img">
									<image src="https://xcx.xiaombt.com/img/img/xihuan (1).png" mode=""></image>
									<image v-show="false" src="https://xcx.xiaombt.com/img/img/xihuan (2).png" mode=""></image>
								</view>
								<view class="">
									99
								</view>

							</view>
						</view>
						<view class="pinglun-item">
							<image class="a" src="https://xcx.xiaombt.com/img/img/底图-2.png" mode=""></image>
							<view class="b">
								<view class="name">
									张天爱
								</view>
								<view class="pinglun-con">
									动物解刨学主要学什么？
								</view>
							</view>
							<view class="c">
								<view class="img">
									<image src="https://xcx.xiaombt.com/img/img/xihuan (1).png" mode=""></image>
									<image v-show="false" src="https://xcx.xiaombt.com/img/img/xihuan (2).png" mode=""></image>
								</view>
								<view class="">
									99
								</view>

							</view>
						</view>
					
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		consultDetail
	} from '@/api/index.js'
	export default {
		data() {
			return {
				viewHeight: null,
				navbarHeight: null,
				data:{}
			};
		},
		async onLoad(option) {



			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				if (data) {
					this.navbarHeight = data.height;
				}
			}).exec();
			query.select('.my-top').boundingClientRect(data => {
				if (data) {
					this.viewHeight = data.height;
				}
			}).exec();
			uni.showLoading({
				title: '',
				mask: true
			});
			this.id = option.id
			consultDetail({
				id: this.id
			}).then(res => {
				uni.hideLoading();
				if (res.errno === '0') {
					this.data = res.rst
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					});
				}
			})




		},

		methods: {

		}
	};
</script>


<style lang="scss" scoped>
	.main {
		.title {
			width: 90%;
			margin: auto;
			padding: 37rpx 0;
			color: rgb(108, 93, 71);
			font-family: 思源黑体;
			font-size: 36rpx;
			font-weight: 700;
			white-space: nowrap; // 强制一行显示
			overflow: hidden; // 超出隐藏
			text-overflow: ellipsis; // 省略号
			text-align: left;
		}

		.one {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: rgb(108, 93, 71);
			font-size: 24rpx;
			font-weight: 300;
			line-height: 24rpx;
			width: 90%;
			margin: auto;

			.left {
				width: 400rpx;
			}

			.right {
				width: 150rpx;
				text-align: right;
			}
		}

		.con {
			width: 90%;
			margin: auto;
			min-height: 600rpx;
			padding: 20rpx 0;
		}

		.bottom {
			width: 90%;
			margin: auto;
			display: flex;
			align-items: center;
			color: rgb(108, 93, 71);
			font-family: 思源黑体;
			font-size: 24rpx;
			font-weight: 300;
			line-height: 24rpx;
			justify-content: space-between;

			.right {
				display: flex;
				align-items: center;

				.img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}

		.pinglun {

			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			background: rgb(242, 239, 233);
			margin-top: 22rpx;
			padding: 20rpx 0;

			.center {
				width: 90%;
				margin: auto;
				min-height: 300rpx;

				.pinglun-title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						color: rgb(108, 93, 71);
						font-family: 思源黑体;
						font-size: 28rpx;
						font-weight: 700;
						line-height: 24rpx;

					}

					.right {
						display: flex;
						align-items: center;
						color: rgb(108, 93, 71);
						font-family: 思源黑体;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 24rpx;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}

						text {
							margin-top: -20rpx;
						}

					}
				}

				.pinglun-list {
					.pinglun-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 20rpx 0;

						.a {
							width: 60rpx;
							height: 60rpx;
							border-radius: 8rpx;
						}

						.b {
							width: 496rpx;

							.name {
								color: rgb(108, 93, 71);
								font-family: 思源黑体;
								font-size: 28rpx;
								font-weight: 400;
								width: 100%;

							}

							.pinglun-con {
								color: rgb(51, 51, 51);
								font-family: 思源黑体;
								font-size: 24rpx;
								font-weight: 400;
								width: 100%;
								line-height: 34rpx;
								margin-top: 10rpx;

							}
						}

						.c {
							display: flex;
							color: rgb(108, 93, 71);
							font-family: 思源黑体;
							font-size: 24rpx;
							font-weight: 300;
							align-items: center;

							.img {
								width: 32rpx;
								height: 32rpx;
								margin-right: 10rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}








	.my-top {
		width: 100%;
		background-color: #F2EFE9;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;

		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select {
			padding: 20rpx 38rpx;
			background-color: #fff;

			.center {
				width: 100%;
				height: 76rpx;
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

	}
</style>